<template>
  <el-dialog
    :title="$t('statistic.regenarate_repush')"
    v-model="genVisible"
    width="50%"
    :modal="false"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      label-position="top"
      :rules="rules"
      label-suffix=":"
    >
      <el-form-item :label="$t('common.customer_name')" prop="customerName">
        <el-input
          v-model="dataForm.customerName"
          autocomplete="off"
          clearable
          :placeholder="$t('common.customer_name')"
          style="width: 84%"
          @focus="openCustomerList"
          :disabled="allCustomer"
        />
        <el-checkbox style="margin-left: 20px" v-model="allCustomer">{{
          $t("statistic.all_customer")
        }}</el-checkbox>
      </el-form-item>
      <el-form-item :label="$t('flycare.statement.generate_month')" prop="generateMonth">
        <el-date-picker
          v-model="dataForm.generateMonth"
          style="width: 100%"
          :format="'YYYY-MM'"
          :value-format="'YYYY-MM'"
          type="month"
          :picker-options="pickerOptions"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button text @click="closeDialog">{{ $t("common.cancel") }}</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="doGenerate">{{
          $t("common.confirm")
        }}</el-button>
      </span>
    </template>
    <customer-list
      ref="customerList"
      v-model="customerListVisible"
      @confirmSelect="confirmSelectCustomer"
    />
  </el-dialog>
</template>
<script>
import CustomerList from "@/views/service-management/components/customer-list";
import { regenerateAndRePushStatisticData } from "@/api/statistic-operator";

export default {
  components: {
    CustomerList,
  },
  data() {
    var validateCustomer = (rule, value, callback) => {
      if (!this.allCustomer) {
        if (!value) {
          callback(new Error(this.$t("flycare.input_require.customer_name")));
        }
      }
      callback();
    };
    return {
      genVisible: false,
      confirmLoading: false,
      platOptions: [],
      serviceOptions: [],
      customerListVisible: false,
      currentPlatOption: [],
      allCustomer: false,
      dataForm: {
        customerName: "",
        characterCode: "OPERATOR",
        keyId: "",
        platCode: "",
        generateMonth: "",
      },
      rules: {
        customerName: [{ trigger: "change", validator: validateCustomer }],
        generateMonth: [
          {
            required: true,
            trigger: "change",
            message: this.$t("flycare.input_require.month"),
          },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getFullYear() * 10 + time.getMonth() >
            new Date().getFullYear() * 10 + new Date().getMonth()
          );
        },
      },
    };
  },
  methods: {
    openDialog(platCode) {
      this.genVisible = true;
      this.dataForm.platCode = platCode;
    },
    confirmSelectCustomer(selectedCustomer) {
      this.dataForm.characterCode = selectedCustomer.characterCode;
      this.dataForm.keyId = selectedCustomer.keyId;
      this.dataForm.customerName = selectedCustomer.name;
    },
    openCustomerList() {
      this.customerListVisible = true;
      this.$nextTick(() => {
        this.$refs.customerList.openDialog();
      });
    },
    doGenerate() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.$confirm(this.$t("statistic.regenarate_repush_confirm"), "", {
            confirmButtonText: this.$t("common.confirm"),
            cancelButtonText: this.$t("common.cancel"),
            type: "info",
          }).then(() => {
            this.confirmLoading = true;
            let keyIds = [];
            if (!this.allCustomer) {
              keyIds.push(this.dataForm.keyId);
            }
            console.log(this.dataForm.generateMonth);
            var data = {
              year: Number(this.dataForm.generateMonth.split("-")[0]),
              month: Number(this.dataForm.generateMonth.split("-")[1]),
              characterCode: "OPERATOR",
              keyIds: keyIds,
              platCode: this.dataForm.platCode,
            };
            regenerateAndRePushStatisticData(data)
              .then(() => {
                this.$message.success(this.$t("statistic.success"));
                this.closeDialog();
              })
              .catch((e) => {
                this.$message.error(e.message);
              })
              .finally(() => {
                this.confirmLoading = false;
              });
          });
        }
      });
    },
    closeDialog() {
      this.genVisible = false;
      this.$refs.dataForm.resetFields();
      this.allCustomer = false;
    },
  },
};
</script>
